import { Drawer, Tab } from '@alifd/next';
import { t } from '@lingui/macro';
import React from 'react';
import TaskInfo from './TaskInfo';
import TaskLogs from './TaskLogs';
import { observer } from 'mobx-react-lite';

const TaskInfoDrawer = (props) => {
  const {
    onClose,
    task,
    visible,
    modal,
    handleUpdate,
  } = props;
  const isEditModal = modal[0] === 'edit';

  const tabItems = [
    {
      title: '任务信息',
      content: (
        <TaskInfo
          task={task}
          isEditModal={isEditModal}
          onCancel={onClose}
          onSubmit={handleUpdate}
        />
      ),
    },
    {
      title: '任务历史变更记录',
      content: (
        <TaskLogs task={task} />
      ),
    },
  ];

  return (
    <Drawer
      visible={visible}
      title={`任务${task?.id}详情`}
      onClose={onClose}
      closeMode={['esc', 'mask', 'close']}
      style={{ maxWidth: '80%' }}
      width="90%"
    >
      <Tab>
        {tabItems.map((item, idx) => (
          <Tab.Item
            title={t`${item.title}`}
            key={`${idx}-${item.title}-scTask`}
          >
            {item.content}
          </Tab.Item>
        ))}
      </Tab>
    </Drawer>
  );
};

export default observer(TaskInfoDrawer);
